import React, { useEffect, useState } from 'react'
import "../../../api/Data"
import request from "../../../api/request"
import { useDispatch, useSelector } from "react-redux"
import { GETLIST, ALLSTATE, GETINDEX,ADDSHOPCAR } from "../../../types/store.d"
import { Toast, NavBar, Search, DropdownMenu , Image, ProductCard, Tag, Grid, Button } from 'react-vant';
import { WeappNav, Aim, AddO } from '@react-vant/icons';
import Leftclassify from '../../../components/Leftclassify'
import { useNavigate } from 'react-router'
function Classify() {
  
  const [value, setValue] = useState('');
  const navigate=useNavigate()
  const dispatch = useDispatch()
  const newarr = ["全部", "好吃推荐", "时令上新", "会员专区"]
  useEffect(() => {
    request.get("/api/list").then(res => {
      dispatch({
        type: GETLIST,
        payload: res.data.list
      })
    })
  }, [])
  const listArr = useSelector((state: ALLSTATE) => {
    return state.listArr
  })
  const rightArr = useSelector((state: ALLSTATE) => {
    return state.rightArr
  })
  console.log(rightArr);
  // 加入购物车
  const addshopcar = (val:object) => {
      console.log(val);
      dispatch({
        type: ADDSHOPCAR,
        payload: val
      })
  }
  return (
    <div className="classify">
      <header>
        <div onClick={()=>navigate("/search")}>
          <Search
          shape="round"
          background="#ccc"
          value={value}
          onChange={setValue}
          placeholder="请输入"
        />
        </div>
        
      </header>
      <main style={{ display: "flex",justifyContent:"space-between" }}>
        {/* 左侧组件 */}
        <Leftclassify dataprops={listArr}></Leftclassify>

        {
          rightArr.map((item, index) => {
            return <div key={index} style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
              <div className="demo-button" style={{ display: "flex", alignItems: "center" }}>
                {
                  newarr.map((item, index) => {
                    return <Button round type="default" key={index}>{item}</Button>
                  })
                }
              </div>
              {
                item.info.map((item: any, index: number) => {
                  return <div key={index} style={{width:"90%",display:"flex",alignItems:"center",justifyContent:"space-between"}}>
                    <ProductCard 
                    price={item.price}
                    desc={item.desc}
                    title={item.title}
                    thumb={item.img}
                  />
                  <AddO color="blue" fontSize="20px" onClick={() => addshopcar(item)} />
                  </div>
                })
              }
            </div>
          })
        }
      </main>
    </div>
  )
}

export default Classify